<template>
  <div class="box">
    <div class="box-left">
      <div
        :class="[
          mode == 'graph' ? 'active' : '',
          industry_cate == 1 ? 'radius' : '',
          'status-box',
          'left-status',
          'no-select',
        ]"
        @click="changeType('graph')"
      >
        <img
          v-if="mode != 'graph'"
          src="~@img/atlas/icon-tupu-normal.png"
          alt=""
        />
        <img
          v-if="mode == 'graph'"
          src="~@img/atlas/icon-tupu-select.png"
          alt=""
        />
        <span>图谱模式</span>
      </div>
      <div
        v-if="industry_cate != 1"
        :class="[
          mode == 'chain' ? 'active' : '',
          'status-box',
          'right-status',
          'no-select',
        ]"
        @click="changeType('chain')"
      >
        <img
          v-if="mode != 'chain'"
          src="~@img/atlas/icon-liantu-normal.png"
          alt=""
        />
        <img
          v-if="mode == 'chain'"
          src="~@img/atlas/icon-liantu-select.png"
          alt=""
        />
        <span>链图模式</span>
      </div>
      <div class="love-btn no-select" v-if="industry_cate != 1">
        <p v-if="collect == 2" @click="setCollect(collect)">
          <img src="~@img/atlas/icon-collect-normal.png" alt="" />
          <span>收藏</span>
        </p>
        <p v-if="collect == 1" @click="setCollect(collect)">
          <img src="~@img/atlas/icon-collect-select.png" alt="" />
          <span>已收藏</span>
        </p>
      </div>
      <div class="map-btn no-select" @click="changeType('map')">
        <img src="~@img/atlas/icon-change.png" alt="" />
        <span>切换地图</span>
      </div>
      <div class=" p-d-btn no-select">
        <span v-if="product"
          >当前环节: {{ product }}
          <img src="~@img/public/icon-close.png" alt="" @click="close(1)"
        /></span>
        <span v-if="district"
          >当前地区: {{ district }}
          <img src="~@img/public/icon-close.png" alt="" @click="close(2)"
        /></span>
      </div>

      <div class="chart-box" v-if="mode == 'map'">
        <div class="chart" ref="chartMap"></div>
      </div>
      <div class="chart-box" v-if="mode == 'graph'">
        <div class="chart" ref="chartGraph"></div>
      </div>
      <div class="chart-box" v-if="mode == 'chain'">
        <ul class="Industrial-chain">
          <li class="top_chain">
            <div class="chain_head">上游</div>

            <el-collapse accordion>
              <el-collapse-item
                v-for="(item, index) in upstream.subNodeList"
                :key="index"
              >
                <template slot="title">
                  <div
                    @click="getProduct(item.node, item.node)"
                    :class="willIndustry == item.node ? 'title_active' : ''"
                  >
                    {{ item.node }}
                  </div>
                </template>
                <ul>
                  <li
                    v-for="(itemx, indexx) in item.subNodeList"
                    :key="indexx"
                    @click="getProduct(itemx.node, itemx.node)"
                    :class="willIndustry == itemx.node ? 'text_active' : ''"
                  >
                    {{ itemx.node }}
                    <i
                      class="el-icon-arrow-right"
                      v-if="itemx.subNodeList.length > 0"
                      :class="subNodeListShow == itemx.node ? 'isactive' : ''"
                    ></i>
                    <ul
                      v-if="
                        itemx.subNodeList.length > 0 &&
                          subNodeListShow == itemx.node
                      "
                    >
                      <li
                        v-for="(items, indess) in itemx.subNodeList"
                        :key="indess"
                        @click.stop="
                          getProduct(items.node, items.node, itemx.node)
                        "
                        :class="willIndustry == items.node ? 'text_active' : ''"
                      >
                        {{ items.node }}
                      </li>
                    </ul>
                  </li>
                </ul>
              </el-collapse-item>
              <!-- <div
              v-if="
                upstream &&
                  upstream.subNodeList &&
                  upstream.subNodeList.length == 0
              "
            >
              暂无产业
            </div> -->
            </el-collapse>
          </li>
          <li class="center_chain">
            <div class="chain_head">中游</div>
            <el-collapse accordion>
              <el-collapse-item
                v-for="(item, index) in midstream.subNodeList"
                :key="index"
              >
                <template slot="title">
                  <div
                    @click="getProduct(item.node, item.node)"
                    :class="willIndustry == item.node ? 'title_active' : ''"
                  >
                    {{ item.node }}
                    <!-- ({{ item.count }}) -->
                  </div>
                </template>
                <ul>
                  <li
                    v-for="(itemx, indexx) in item.subNodeList"
                    :key="indexx"
                    @click="getProduct(itemx.node, itemx.node)"
                    :class="willIndustry == itemx.node ? 'text_active' : ''"
                  >
                    {{ itemx.node }}
                    <i
                      class="el-icon-arrow-right"
                      v-if="itemx.subNodeList.length > 0"
                      :class="subNodeListShow == itemx.node ? 'isactive' : ''"
                    ></i>
                    <ul
                      v-if="
                        itemx.subNodeList.length > 0 &&
                          subNodeListShow == itemx.node
                      "
                    >
                      <li
                        v-for="(items, indess) in itemx.subNodeList"
                        :key="indess"
                        @click.stop="
                          getProduct(items.node, items.node, itemx.node)
                        "
                        :class="willIndustry == items.node ? 'text_active' : ''"
                      >
                        {{ items.node }}
                      </li>
                    </ul>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </li>
          <li class="bottom_chain">
            <div class="chain_head">下游</div>
            <el-collapse accordion>
              <el-collapse-item
                v-for="(item, index) in downstream.subNodeList"
                :key="index"
              >
                <template slot="title">
                  <div
                    @click="getProduct(item.node, item.node)"
                    :class="willIndustry == item.node ? 'title_active' : ''"
                  >
                    {{ item.node }}
                    <!-- ({{ item.count }}) -->
                  </div>
                </template>
                <ul>
                  <li
                    v-for="(itemx, indexx) in item.subNodeList"
                    :key="indexx"
                    @click="getProduct(itemx.node, itemx.node)"
                    :class="willIndustry == itemx.node ? 'text_active' : ''"
                  >
                    {{ itemx.node }}
                    <i
                      class="el-icon-arrow-right"
                      v-if="itemx.subNodeList.length > 0"
                      :class="subNodeListShow == itemx.node ? 'isactive' : ''"
                    ></i>
                    <ul
                      v-if="
                        itemx.subNodeList.length > 0 &&
                          subNodeListShow == itemx.node
                      "
                    >
                      <li
                        v-for="(items, indess) in itemx.subNodeList"
                        :key="indess"
                        @click.stop="
                          getProduct(items.node, items.node, itemx.node)
                        "
                        :class="willIndustry == items.node ? 'text_active' : ''"
                      >
                        {{ items.node }}
                      </li>
                    </ul>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </li>
        </ul>
      </div>
    </div>
    <div class="box-right">
      <div class="find">
        <img src="~@img/public/icon-result.png" alt="" />
        <span>已为您找到{{ total }}家相关企业，可按以下条件进行高级搜索</span>
      </div>
      <ul class="option">
        <li>
          企业类型：
          <el-select v-model="entype" clearable placeholder="请选择">
            <el-option
              v-for="item in entype_option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          企业资质：
          <el-select v-model="qualificat" clearable placeholder="请选择">
            <el-option
              v-for="item in qualificat_option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          上市状态：
          <el-select v-model="quoted" clearable placeholder="请选择">
            <el-option
              v-for="item in quoted_option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li class="name">
          企业名称：<el-input
            v-model="company_name"
            type="text"
            placeholder="请输入企业名称关键字"
          />
        </li>
        <li>
          <el-button @click="search">搜索</el-button>
          <el-button @click="clear">清空</el-button>
        </li>
      </ul>
      <el-table
        :data="listInfo"
        ref="multipleTable"
        border
        stripe
        height="490"
        tooltip-effect="light"
        :header-cell-style="{
          textAlign: 'center',
        }"
        :cell-style="{
          textAlign: 'center',
        }"
        style="max-width:663px"
      >
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            <div>
              {{ (page - 1) * per_page + scope.row.index }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="企业名称"
          width="240"
        >
          <template slot-scope="scope">
            <div @click="goEnterPrise(scope.row.id)" style="cursor:pointer">
              {{ scope.row.company_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="企业热度">
          <template slot-scope="scope">
            <div
              v-if="
                scope.row.hots == 0 ||
                  scope.row.hots == '' ||
                  scope.row.hots == null
              "
            >
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
            </div>
            <div v-if="scope.row.hots == 1">
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
            </div>
            <div v-if="scope.row.hots == 2">
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
            </div>
            <div v-if="scope.row.hots == 3">
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
            </div>
            <div v-if="scope.row.hots == 4">
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-pale.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
            </div>
            <div v-if="scope.row.hots >= 5">
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
              <img
                src="~@img/atlas/icon-fire-red.png"
                style="width:22px;height:26px;margin-right:10px;  margin-top: 10px;"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="per_page"
          layout=" prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  screening,
  industryGraph,
  graphZero,
  graphNext,
  chain,
  industryCollect,
  reversalCollect,
  enterpriseList,
  EpSdMap,
  hotMap,
} from "@api/atlas";

import ty from "@map/ty.json";

export default {
  data() {
    return {
      chartMap: null,
      chartGraph: null,
      mode: "graph",
      collect: "2",
      loadingMap: false,
      loadingGraph: false,
      // 上中下游
      IndustrialChain: {},
      // 上游
      upstream: {},
      // 中游
      midstream: {},
      // 下游
      downstream: {},
      // 上中下游中的下级是否显示
      subNodeListShow: false,
      // 上中下游点击产业
      product: "",
      // 将要选中的行业
      willIndustry: "",

      quoted_option: [],
      qualificat_option: [],
      entype_option: [],
      listInfo: [],
      total: 0,
      page: 1,
      per_page: 9,
      // 点击地图区域
      district: "",
      //  点击链图 二级产业气泡图

      entype: "",
      company_name: "",
      qualificat: "",
      quoted: "",
      searchOption: {
        entype: "",
        company_name: "",
        qualificat: "",
        quoted: "",
      },
      mapData: [],
      cate1_next_id: "",
      cate1_next_category: "",
      hotMap: [
        { name: "小店区", value: 0 },
        { name: "迎泽区", value: 0 },
        { name: "杏花岭区", value: 0 },
        { name: "万柏林区", value: 0 },
        { name: "尖草坪区", value: 0 },
        { name: "晋源区", value: 0 },
        { name: "古交市", value: 0 },
        { name: "清徐县", value: 0 },
        { name: "阳曲县", value: 0 },
        { name: "娄烦县", value: 0 },
      ],
      hotMaxValue: 0,
    };
  },
  props: ["industry_id", "industry_cate"],
  watch: {
    industry_id(nv, ov) {
      // 切换为graph 防止内容展示错误
      this.changeType("graph");
      this.product = "";
      this.district = "";

      this.clear();

      if (this.industry_cate == 2) {
        // this.$message.success("获取产业链");
        this.getChain();
        this.getIndustryCollect();
        this.getEpSdMap();
        this.getHotMap();
      }
    },
    "$route.name": function(nv, ov) {
      if (nv == "atlas" && this.industry_cate == 2) {
        this.getIndustryCollect();
      }
    },
  },
  mounted() {
    this.getScreening();
    this.getIndustryGraph();
    this.getEnterpriseList();

    if (this.mode == "map") {
      this.$nextTick(() => {
        this.initChartMap();
      });
    }
    if (this.mode == "graph") {
      this.$nextTick(() => {
        this.initChartGraph();
        if (this.industry_cate == 1) {
          this.getIndustryGraph();
        } else if (this.industry_cate == 2) {
          this.getGraphZero();
        }
      });
    }
    if (this.industry_cate == 2) {
      // this.$message.success("获取产业链");
      this.getChain();
      this.getIndustryCollect();
      this.getEpSdMap();
      this.getHotMap();
    }
  },
  methods: {
    async getEpSdMap(id, cate, clear) {
      let res = await EpSdMap({
        inid: id || this.industry_id,
        cate: cate || this.industry_cate,
        district: this.district,
        product: this.product,
      });

      if (res.code && res.code != 0) {
        if (this.chartMap && this.mode == "map") {
          this.upChartMap([]);
        }
      } else {
        let data = [];
        res.map((item) => {
          data.push({
            id: item.id,
            name: item.name,
            value: [item.jwd.lng, item.jwd.lat, 100],
          });
        });
        this.mapData = data;
        if (this.chartMap && this.mode == "map") {
          this.upChartMap(data);
        }
      }
      if (clear && this.chartMap) {
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "开发区",
        });
      }
    },
    async getHotMap(id, cate, clear) {
      let res = await hotMap({
        inid: id || this.industry_id,
        cate: cate || this.industry_cate,
        district: this.district,
        product: this.product,
      });
      console.log(res);
      if (res.code && res.code != 0) {
        if (this.chartMap && this.mode == "map") {
          this.upChartHotMap(
            [
              { name: "小店区", value: 0 },
              { name: "迎泽区", value: 0 },
              { name: "杏花岭区", value: 0 },
              { name: "万柏林区", value: 0 },
              { name: "尖草坪区", value: 0 },
              { name: "晋源区", value: 0 },
              { name: "古交市", value: 0 },
              { name: "清徐县", value: 0 },
              { name: "阳曲县", value: 0 },
              { name: "娄烦县", value: 0 },
            ],
            0
          );
        }
      } else {
        let maxValue = 0;
        let list = res.map((item) => {
          if (item.company_count > maxValue) {
            maxValue = item.company_count;
          }
          return { name: item.name, value: item.company_count };
        });
        this.hotMap = list;
        this.hotMaxValue = maxValue;
        if (this.chartMap && this.mode == "map") {
          this.upChartHotMap(list, maxValue);
        }
      }
      if (clear && this.chartMap) {
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "开发区",
        });
      }
    },
    search() {
      this.searchOption = {
        entype: this.entype,
        company_name: this.company_name,
        qualificat: this.qualificat,
        quoted: this.quoted,
      };
      this.page = 1;
      this.getEnterpriseList();
    },
    clear() {
      this.entype = "";
      this.company_name = "";
      this.qualificat = "";
      this.quoted = "";
      this.searchOption = {
        entype: "",
        company_name: "",
        qualificat: "",
        quoted: "",
      };
      this.page = 1;
      this.getEnterpriseList();
    },
    close(type) {
      if (type == 1) {
        this.page = 1;
        this.product = "";
        this.willIndustry = "";
        this.getEnterpriseList();
        this.getEpSdMap();
        this.getHotMap();
      } else if (type == 2) {
        this.district = "";
        if (this.industry_cate == 2) {
          this.getChain();
        }
        if (this.cate1_next_id && this.cate1_next_category) {
          this.getEpSdMap(this.cate1_next_id, this.cate1_next_category, true);
          this.getHotMap(this.cate1_next_id, this.cate1_next_category, true);
        } else {
          this.getEpSdMap("", "", true);
          this.getHotMap("", "", true);
        }
      }
    },
    //获取三企业
    async getEnterpriseList(id, cate) {
      let res = await enterpriseList({
        inid: id || this.industry_id,
        cate: cate || this.industry_cate,
        page: this.page,
        perpage: this.per_page,
        product: this.product,
        entype: this.searchOption.entype,
        qualificat: this.searchOption.qualificat,
        quoted: this.searchOption.quoted,
        company_name: this.searchOption.company_name,
      });

      if (res.code && res.code != 0) {
      } else {
        this.listInfo = res.df.map((item, index) => {
          return { ...item, index: index + 1 };
        });
        this.total = res.size;
      }
    },
    // 柱状图 与展示总体数据去掉
    // async getEnterpriseBar() {
    //   let res = await enterpriseBar({
    //     inid: this.industry_id,
    //     cate: this.industry_cate,
    //     page: this.page,
    //     perpage: this.per_page,
    //     entype: this.entype,
    //     product: this.product,
    //     company_name: this.company_name,
    //     qualificat: this.qualificat,
    //     quoted: this.quoted,
    //   });
    //
    // },
    // async getEnterpriseTotal() {
    //   let res = await enterpriseTotal({
    //     inid: this.industry_id,
    //     cate: this.industry_cate,
    //     page: this.page,
    //     perpage: this.per_page,
    //     entype: this.entype,
    //     product: this.product,
    //     company_name: this.company_name,
    //     qualificat: this.qualificat,
    //     quoted: this.quoted,
    //   });
    //
    // },
    // 获取链图
    async getChain() {
      let res = await chain({
        inid: this.industry_id,
        district: this.district,
      });
      //
      if (res.code && res.code != 0) {
      } else {
        this.IndustrialChain = res;
        this.upstream = this.IndustrialChain.nodeList[0];
        this.midstream = this.IndustrialChain.nodeList[1];
        this.downstream = this.IndustrialChain.nodeList[2];
      }
    },
    //获取二级行业是否收藏
    async getIndustryCollect() {
      let res = await industryCollect({ id: this.industry_id });
      if (res.code == 0) {
        this.collect = res.collect;
      }
    },
    async setCollect(collect) {
      let res = await reversalCollect({
        id: this.industry_id,
        collect,
      });
      if (res.code == 0) {
        this.collect = res.collect;
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 获取分类
    async getScreening() {
      let res = await screening();
      if (res.code == 0) {
        this.entype_option = res.options.entype;
        this.qualificat_option = res.options.qualificat;
        this.quoted_option = res.options.quoted;
      }
    },

    // 一级产业集群 气泡图
    async getIndustryGraph() {
      let res = await industryGraph({
        inid: this.industry_id || 4,
        cate: this.industry_cate || "1",
      });
      if (res.code && res.code != 0) {
      } else {
        let links = [];
        res.links.map((item) => {
          links.push({
            source: item.from,
            target: item.to,
            text: item.text,
            symbolSize: 20,
          });
        });
        let nodes = [];
        res.nodes.map((item) => {
          nodes.push({
            id: item.id,
            name: item.name,
            isOpen: false,
            category: item.cate,
            draggable: true,
            value: 60,
          });
        });
        this.graphNodes = nodes;
        this.graphLinks = links;
        if (this.chartGraph) {
          this.chartGraph.setOption({
            series: [
              {
                data: nodes,
                links: links,
              },
            ],
          });
        }
      }
    },
    // 子产业 气泡图
    async getGraphZero() {
      let res = await graphZero({
        inid: this.industry_id || 4,
        cate: this.industry_cate || "1",
      });
      if (res.code && res.code != 0) {
      } else {
        let links = [];
        res.links.map((item) => {
          links.push({
            source: item.from,
            target: item.to,
            text: item.text,
            symbolSize: 20,
          });
        });
        let nodes = [];
        res.nodes.map((item) => {
          nodes.push({
            id: item.id,
            name: item.name,
            nickname: item.nickname,
            isOpen: true,
            category: item.category,
            draggable: true,
            value: 60,
          });
        });
        this.graphNodes = nodes;
        this.graphLinks = links;
        if (this.chartGraph) {
          this.chartGraph.setOption({
            series: [
              {
                data: nodes,
                links: links,
              },
            ],
          });
        }
      }
    },
    async getGraphNext(id, name) {
      let res = await graphNext({
        id,
        name,
      });
      if (res.code && res.code != 0) {
      } else {
        let links = [];
        res.links.map((item) => {
          links.push({
            source: item.from,
            target: item.to,
            text: item.text,
            symbolSize: 20,
          });
        });
        let nodes = [];
        res.nodes.map((item) => {
          nodes.push({
            id: item.id,
            name: item.name,
            nickname: item.nickname,
            isOpen: false,
            draggable: true,
            value: 60,
          });
        });
        this.graphNodes = this.graphNodes.concat(nodes);
        this.graphLinks = this.graphLinks.concat(links);
        if (this.chartGraph) {
          this.chartGraph.setOption({
            series: [
              {
                data: this.graphNodes,
                links: this.graphLinks,
              },
            ],
          });
        }
      }
    },
    //
    goEnterPrise(id) {
      this.$router.push({
        name: "enterprise",
        params: { id, activeMenu: "atlas", type: "ty" },
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      if (this.cate1_next_id && this.cate1_next_category) {
        this.getEnterpriseList(this.cate1_next_id, this.cate1_next_category);
      } else {
        this.getEnterpriseList();
      }
    },
    changeType(mode) {
      this.mode = "";
      this.mode = mode;
      if (this.chartMap) {
        this.chartMap.dispose();
      }
      if (this.chartGraph) {
        this.chartGraph.dispose();
      }

      if (this.loadingMap == false && this.mode == "map") {
        this.$nextTick(() => {
          this.initChartMap();
        });
      }
      if (this.loadingGraph == false && this.mode == "graph") {
        this.$nextTick(() => {
          this.initChartGraph();
          if (this.industry_cate == 1) {
            this.getIndustryGraph();
          } else if (this.industry_cate == 2) {
            this.getGraphZero();
          }
        });
      }
    },
    // 上中下游 展示
    getProduct(node, name, fname) {
      this.product = node;
      this.willIndustry = name;
      if (fname) {
        if (this.subNodeListShow == name) {
          this.subNodeListShow = false;
        } else {
          this.subNodeListShow = fname;
        }
      } else {
        if (this.subNodeListShow == name) {
          this.subNodeListShow = false;
        } else {
          this.subNodeListShow = name;
        }
      }
      this.page = 1;
      this.getEnterpriseList();
      this.getEpSdMap();
      this.getHotMap();
    },
    initChartMap() {
      this.chartMap = this.$echarts.init(this.$refs.chartMap);
      this.$echarts.registerMap("ty", ty);
      const initOption = {
        tooltip: {
          confine: true,
          formatter: (parmas) => {
            if (parmas.componentSubType == "effectScatter") {
              return "";
            }
            if (parmas.componentSubType == "map") {
              return (
                parmas.marker +
                "  " +
                parmas.name +
                " " +
                parmas.value +
                "家企业"
              );
            }
          },
        },
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "10%",
          top: "bottom",
          calculable: true,
          seriesIndex: [0],
          inRange: {
            color: ["#489FF0", "#2775CE", "#1F5BC1", "#1D4BA8", "#1D337C"],
          },
        },
        geo: {
          type: "map",
          map: "ty",
          zoom: 1.2,
          geoIndex: 0,
          roam: true,
          selectedMode: "single",
          label: {
            show: true,
            color: "#fff",
            formatter: function(params) {
              //标签内容
              return params.name;
            },
            fontSize: 12,
            position: "insideBottom",
          },
          itemStyle: {
            areaColor: "#2953a8",
            borderColor: "#fff",
            borderWidth: 2,
          },
          select: {
            itemStyle: {
              areaColor: "#2c90e5",
              color: "#2c90e5",
            },
            label: {
              show: true,
              color: "#fff",
            },
          },
          emphasis: {
            label: {
              show: true,
              color: "#fff",
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            itemStyle: {
              areaColor: "#2c90e5",
              label: {
                show: true,
                color: "#fff",
              },
              borderWidth: 0,
            },
          },
        },

        series: [
          {
            name: "行政区",
            type: "map",
            map: "ty",
            geoIndex: 0,
            animation: false,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            data: [
              { name: "小店区" },
              { name: "迎泽区" },
              { name: "杏花岭区" },
              { name: "万柏林区" },
              { name: "尖草坪区" },
              { name: "晋源区" },
              { name: "古交市" },
              { name: "清徐县" },
              { name: "阳曲县" },
              { name: "娄烦县" },
            ],
            select: {
              itemStyle: {
                areaColor: "#fff",
                color: "#fff",
                label: {
                  show: true,
                  color: "#fff",
                },
                borderWidth: 0,
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
          },
          {
            name: "开发区",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: [
              // {
              //   name: "晋城经济技术开发区",
              //   value: [112.555016, 37.602938, 200],
              // },
            ],
            symbolSize: function(val) {
              return val[2] / 18;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            // hoverAnimation: true,
            label: {
              show: false,
              // formatter: "  {b}",
              position: "right",
              color: "#fff",
              fontSize: 14,
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            select: {
              itemStyle: {
                color: "#ffff00",
              },
              label: {
                show: true,
                padding: [4, 10],
                color: "#4077c8",
                borderRadius: [6],
                backgroundColor: "#e7f4ff",
                offset: [30, 40],
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
            },
            itemStyle: {
              color: "#ffff00",
              shadowBlur: 10,
              shadowColor: "#ffff00",
            },
            emphasis: {
              label: {
                show: true,
                position: "top",
                padding: [4, 10],
                color: "#4077c8",
                borderRadius: [6],
                backgroundColor: "#e7f4ff",
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
              itemStyle: {
                color: "#ffff00",
                shadowBlur: 10,
                shadowColor: "#ffff00",
              },
            },
            selectedMode: "single",
            zlevel: 1,
          },
        ],
      };
      this.chartMap.setOption(initOption);
      // 地图点击事件
      this.chartMap.on("click", (item) => {
        if (item.componentSubType == "effectScatter") {
          this.chartMap.dispatchAction({
            type: "downplay",
            seriesName: "行政区",
            dataIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
          });
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map") {
          this.chartMap.dispatchAction({
            type: "downplay",
            seriesName: "行政区",
            dataIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
          });
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: item.dataIndex,
          });
          this.district = item.name;
          if (this.industry_cate == 2) {
            this.getChain();
          }
          if (this.cate1_next_id && this.cate1_next_category) {
            this.getEpSdMap(this.cate1_next_id, this.cate1_next_category);
            this.getHotMap(this.cate1_next_id, this.cate1_next_category);
          } else {
            this.getEpSdMap();
            this.getHotMap();
          }

          // this.$message({
          //   message: "成功切换至" + item.name,
          //   type: "success",
          // });
        }
      });
      this.upChartMap(this.mapData);
      this.upChartHotMap(this.hotMap, this.hotMaxValue);
    },
    upChartMap(data) {
      let options = {
        series: [
          {},
          {
            data: data,
          },
        ],
      };
      this.chartMap.setOption(options);
    },
    upChartHotMap(list, maxValue) {
      let options = {
        visualMap: {
          max: maxValue,
        },
        series: [
          {
            data: list,
          },
          {},
        ],
      };
      this.chartMap.setOption(options);
    },
    initChartGraph() {
      this.chartGraph = this.$echarts.init(this.$refs.chartGraph);
      const option = {
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph", // 类型:关系图
            layout: "force", //图的布局，类型为力导图
            symbolSize: 50, // 调整节点的大小
            roam: true, //支持拖拽缩放
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: 10,
            zoom: 0.8,
            edgeLabel: {
              textStyle: {
                fontSize: 12,
              },
            },
            force: {
              repulsion: 600,
              edgeLength: 100,
            },
            draggable: false,
            itemStyle: {
              color: "#5b9bd5",
            },
            emphasis: {
              itemStyle: {
                color: "#2164a1",
              },
            },
            // symbolSize: 80,
            // symbolOffset: [20,0],
            lineStyle: {
              opacity: 0.9,
              width: 4,
              curveness: 0,
              color: "#b5cbe7",
            },
            label: {
              show: true,
              textStyle: {},
            },
            data: [],
            // [
            //               {
            //                 id: 4,
            //                 name: "新一代信息技术",
            //                 category: 1,
            //                 draggable: true, // 是否可以拖拽，默认false
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 44,
            //                 name: "智能消费电子(37)",
            //                 category: 2, // 这是种类
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 39,
            //                 name: "其他信息服务(136)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 36,
            //                 name: "物联网(战略未来)(89)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },

            //               {
            //                 id: 38,
            //                 name: "互联网+(146)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 43,
            //                 name: "信息系统集成(335)",
            //                 category: 1,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 33,
            //                 name: "网络安全(27)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 42,
            //                 name: "通信技术及设备(51)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 34,
            //                 name: "云计算(19)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 41,
            //                 name: "数字娱乐(4)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 67,
            //                 name: "新一代半导体(战略未来)(85)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 32,
            //                 name: "信息技术应用创新(战略未来)(201)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 40,
            //                 name: "软件开发(2202)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //               {
            //                 id: 35,
            //                 name: "大数据及人工智能(136)",
            //                 category: 2,
            //                 color: "#43a2f1",
            //                 value: 60, //图形大小
            //               },
            //             ]
            links: [],
            // [
            //   {
            //     source: 0,
            //     target: 1,
            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 2,
            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 3,

            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 4,

            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 5,

            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 6,

            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 7,

            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 8,

            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 9,

            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 10,
            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 11,
            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 12,
            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 13,
            //     symbolSize: 20,
            //   },
            //   {
            //     source: 0,
            //     target: 14,
            //     symbolSize: 20,
            //   },
            // ]
          },
        ],
      };
      this.chartGraph.setOption(option);
      this.chartGraph.on("click", (item) => {
        if (this.industry_cate == 2) {
          this.product = item.data.nickname;
          this.page = 1;
          this.getEnterpriseList();
          this.getEpSdMap();
          this.getHotMap();
        } else if (this.industry_cate == 1) {
          this.cate1_next_id = item.data.id;
          this.cate1_next_category = item.data.category;
          this.page = 1;
          this.getEnterpriseList(item.data.id, item.data.category);
          this.getEpSdMap(item.data.id, item.data.category);
          this.getHotMap(item.data.id, item.data.category);
        }
        if (item.data.isOpen) {
          this.graphNodes.map((i) => {
            if (i.id == item.data.id) {
              i.isOpen = false;
            }
          });
          this.getGraphNext(item.data.id, item.data.nickname);
        } else {
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  height: 100%;
  display: flex;

  .box-left {
    position: relative;
    flex: 0 0 52.7%;
    padding: 20px 40px 30px 30px;
    background: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 10px;
  }
  .box-right {
    position: relative;
    margin-left: 30px;
    flex: 1;
    .pagination {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
.status-box {
  float: left;
  width: 130px;
  height: 40px;
  line-height: 40px;
  background: #ffffff;
  border: 1px solid #5889dc;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #5889dc;
  text-align: center;
  cursor: default;
  img {
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -2px;
  }
}
.left-status {
  border-radius: 10px 0px 0px 10px;
  border-right: 0;
}
.radius {
  border-radius: 10px;
  border-right: 1px solid;
}
.right-status {
  border-radius: 0px 10px 10px 0px;
}
.active {
  background: #5889dc;
  color: #ffffff;
}
.love-btn {
  float: right;
  width: 90px;
  margin-top: 8px;
  text-align: left;
  img {
    vertical-align: middle;
    margin-right: 8px;
  }
  span {
    vertical-align: middle;
  }
}
.map-btn {
  position: absolute;
  bottom: 30px;
  right: 40px;
  width: 147px;
  height: 40px;
  line-height: 36px;
  background: #e7f4ff;
  border-radius: 10px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #4077c8;
  text-align: center;
  img {
    vertical-align: middle;
    margin-right: 8px;
  }
  span {
    vertical-align: middle;
  }
}
.p-d-btn {
  position: absolute;
  bottom: 30px;
  left: 30px;
  height: 40px;

  span {
    display: inline-block;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    background: #e7f4ff;
    border-radius: 10px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #4077c8;
    text-align: center;
    margin-right: 20px;
  }
}
.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.chart-box {
  padding: 40px 0;
  width: 100%;
  height: 100%;
}
.chart {
  width: 100%;
  height: 100%;
}
.Industrial-chain {
  display: flex;
  height: 95%;
  justify-content: space-between;
  align-self: center;
  margin-bottom: 30px;
  & > li {
    // width: 480px;
    flex: 1;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    cursor: default;
    li {
      font-weight: bold;
      cursor: default;
      li {
        font-weight: 400;
      }
    }
  }

  .chain_head {
    // height: 48px;
    // line-height: 48px;

    height: 60px;
    line-height: 60px;
    border-radius: 6px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
  }
  .top_chain {
    margin: 40px 10px 0 0;
    .chain_head {
      background: linear-gradient(0deg, #747bfe 0%, #468ae4 100%);
      box-shadow: 0px 2px 5px 0px rgba(32, 46, 127, 0.5);
    }
    /deep/ .el-collapse {
      height: calc(100% - 70px);
      margin-top: 10px;
      background: rgba(120, 163, 255, 0.15);
      border-radius: 6px;
      overflow-y: scroll;
      scrollbar-color: #767ffe #ebf1ff; //滚动条轨道颜色   滚动条滑块的颜色
      scrollbar-width: 6px;
      scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 70px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        background: linear-gradient(0deg, #747bfe, #468ae4);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background: #ebf1ff;
        border-radius: 6px;
      }
    }
  }
  .center_chain {
    margin: 40px 10px 0 0;

    .chain_head {
      background: linear-gradient(0deg, #ff7c78, #fd9965);
    }
    /deep/ .el-collapse {
      height: calc(100% - 70px);
      margin-top: 10px;
      background: rgba(255, 114, 114, 0.15);
      border-radius: 6px;
      // overflow-y: auto;
      overflow-y: scroll;
      scrollbar-color: #ff7c78 #ffeaea; //滚动条轨道颜色   滚动条滑块的颜色
      scrollbar-width: 6px;
      scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 70px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        background: linear-gradient(0deg, #ff7c78, #fd9965);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background: #ffeaea;
        border-radius: 6px;
      }
    }
  }
  .bottom_chain {
    margin: 40px 0 0 0;
    .chain_head {
      background: linear-gradient(0deg, #1ed0c4, #19d0b2);
    }
    /deep/ .el-collapse {
      margin-top: 10px;
      height: calc(100% - 70px);
      background: rgba(23, 208, 177, 0.15);
      border-radius: 6px;
      overflow-y: scroll;
      scrollbar-color: #1ed0c4 #dcf8f3; //滚动条轨道颜色   滚动条滑块的颜色
      scrollbar-width: 6px;
      scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 70px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        background: linear-gradient(0deg, #1ed0c4, #19d0b2);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background: #dcf8f3;
        border-radius: 6px;
      }
    }
  }
}
/deep/ .el-collapse-item__header,
/deep/ .el-collapse-item__wrap {
  background: transparent;
}
.option {
  margin: 24px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
// 修改输入框
/deep/ .option .el-input {
  width: 88%;
  height: 32px;
  line-height: 32px;
}

/deep/ .option .el-input__inner {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  height: 32px;
  line-height: 32px;
}
// 修改选择框
/deep/ .option .el-select {
  width: 140px;
}
/deep/ .el-select .el-input.is-focus .el-input__inner {
  border-color: #cccccc;
  background: #fff;
}
/deep/ .option .name .el-input {
  margin: 16px 0 0 0;
  width: 290px;
}
/deep/ .option .el-select .el-input {
  width: 140px;
}
/deep/ .option .el-input__icon {
  line-height: 32px;
}
//
/deep/ .option .el-icon-arrow-up:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .option .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -webkit-transform: rotateZ(0);
  -o-transform: rotateZ(0);
}
/deep/ .option .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
}
// 修改按钮
/deep/ .option .el-button {
  margin-top: 16px;
  width: 120px;
  height: 32px;
  line-height: 8px;
  text-align: center;
  border-radius: 4px;
  padding: 0;
}
/deep/ .option .el-button:first-of-type {
  background: #446db3;
  color: #fff;
}
/deep/ .option .el-button:last-of-type {
  color: #446db3;
  border-color: #446db3;
}
.box-right .find {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  img,
  span {
    vertical-align: middle;
    margin-right: 10px;
  }
}
// 产业链样式修改
/deep/.top .el-collapse {
  border-top: 0;
  border-bottom: 0;
  height: 252px;
  overflow-y: scroll;
  scrollbar-color: #767ffe #e9f3ff; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: 6px;
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 70px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 6px;
    background: linear-gradient(0deg, #767ffe, #79aefe);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: #e9f3ff;
    border-radius: 6px;
  }
}
/deep/.center .el-collapse {
  border-top: 0;
  border-bottom: 0;
  height: 252px;
  overflow-y: scroll;
  scrollbar-color: #ff7c78 #e9f3ff; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: 6px;
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 70px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 6px;
    background: linear-gradient(0deg, #ff7c78, #fd9965);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: #e9f3ff;
    border-radius: 6px;
  }
}
/deep/.bottom .el-collapse {
  border-top: 0;
  border-bottom: 0;
  height: 252px;
  overflow-y: scroll;
  scrollbar-color: #1ed0c4 #e9f3ff; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: 6px;
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 70px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 6px;
    background: linear-gradient(0deg, #1ed0c4, #19d0b2);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: #e9f3ff;
    border-radius: 6px;
  }
}
/deep/.el-collapse-item__header {
  position: relative;
  margin-top: 20px;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  text-align: center !important;
  border: none;
  div {
    width: 100%;
  }
}

/deep/.el-collapse-item__content {
  padding-bottom: 0;
  text-align: center;
  li {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    line-height: 30px;
  }
}
/deep/.el-collapse-item__wrap {
  border: none;
}
/deep/.el-collapse-item__arrow {
  position: absolute;
  right: 10px;
}
.isactive {
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.el-collapse-item__header div.title_active {
  color: #0043b3;
}
.el-collapse-item__content li.text_active {
  color: #0043b3;
  font-weight: bold;
  li {
    color: #666;
    font-weight: 400;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .option .el-select,
  /deep/ .option .el-select .el-input {
    width: 100px;
  }
  /deep/ .option .name .el-input {
    width: 200px;
  }
  .option {
    font-size: 14px;
  }
  /deep/ .el-table {
    max-width: 568px !important;
    height: 440px !important;
  }
  .box .box-right .pagination {
    max-width: 568px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
  .box .box-left {
    flex: 1;
  }
  /deep/ div .el-collapse-item__header {
    padding-left: 10px !important;
    font-size: 14px !important;
    text-align: left !important;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .option .el-select,
  /deep/ .option .el-select .el-input {
    width: 90px;
  }
  /deep/ .option .name .el-input {
    width: 180px;
  }
  .option {
    font-size: 12px;
  }
  .option .el-button {
    width: 96px;
  }
  /deep/ .el-table {
    max-width: 568px !important;
    height: 344px !important;
  }
  .box .box-right .pagination {
    max-width: 568px;
    transform: scale(0.75);
    -moz-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    -o-transform: scale(0.75);
  }
  .box .box-left {
    flex: 1;
  }
  /deep/ div .el-collapse-item__header {
    padding-left: 10px !important;
    font-size: 14px !important;
    text-align: left !important;
  }
  .box-right .find[data-v-a6aa7d9a] {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/ .option .el-select,
  /deep/ .option .el-select .el-input {
    width: 80px;
    font-size: 12px;
  }
  .el-input__inner {
    padding: 0 4px;
  }
  /deep/ .option .name .el-input {
    width: 160px;
    font-size: 12px;
  }
  .option {
    font-size: 12px;
  }
  /deep/ .el-table {
    max-width: 460px !important;
    height: 444px !important;
  }
  .box-right .find {
    font-size: 14px;
  }
  .box .box-right .pagination {
    max-width: 560px;
    transform: scale(0.75);
    -moz-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    -o-transform: scale(0.75);
  }
  .box .box-left {
    flex: 1;
  }
  /deep/ div .el-collapse-item__header {
    padding-left: 8px !important;
    font-size: 12px !important;
    text-align: left !important;
  }
  .box .box-right .pagination {
    max-width: 520px;
    transform: scale(0.7);
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .el-collapse-item__content li {
    font-size: 12px;
  }
  /deep/ .el-table {
    max-width: 445px !important;
    height: 490px !important;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .box-right .find {
    font-size: 12px;
  }
  /deep/ .el-table {
    max-width: 445px !important;
    height: 394px !important;
  }
  .box .box-right .pagination {
    max-width: 474px;
    transform: scale(0.6);
    -moz-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -o-transform: scale(0.6);
  }
  /deep/ .option .el-select,
  /deep/ .option .el-select .el-input {
    width: 60px;
  }
  .el-input__inner {
    padding: 0 2px;
  }
  /deep/ .option .name .el-input {
    width: 150px;
    font-size: 12px;
  }
  /deep/ .option .el-button {
    width: 60px;
    font-size: 12px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .box {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .box .box-left {
    flex: 0 0 500px;
  }
  .box .box-right {
    margin-top: 40px;
    flex: 0 0 500px;
  }
  /deep/ .option .el-select,
  /deep/ .option .el-select .el-input {
    width: 130px;
  }
  /deep/ .option .name .el-input {
    width: 280px;
    font-size: 12px;
  }
  /deep/ .el-table {
    max-width: 620px !important;
    height: 490px !important;
  }
  .box-right .find {
    font-size: 18px;
  }
  [data-v-a6aa7d9a] .option .el-button {
    width: 100px;
  }
  .box .box-right .pagination {
    position: relative;
    max-width: 520px;
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
  }
}
</style>
